<template>
    <cus-drawer ref="cusDrawerRef" title="动态配置" @onClose="onClose" :showFooter="true">
        <div v-for="item in dynamicAllData" :key="item.id">
            <div class="dynamicBox">
                <div class="dynamicText">{{ item.nameDescr }}</div>
                <Select :disabled="!isEdit" v-if="item.valueItems" v-model="item.paramValue" placeholder="请选择"
                    style="width: 150px;margin:0 40px;">
                    <Option v-for="dishItem in item.valueItems" :key="dishItem.value" :label="dishItem.option"
                        :value="dishItem.value" />
                </Select>
                <Input v-else style="width: 150px;margin:0 40px;" maxlength="20" v-model="item.paramValue"
                    :disabled="!isEdit" />
                <div class="dynamicText">{{ item.valueDescr }}</div>
            </div>
        </div>
        <template #footer>
            <Button v-if="!isEdit" type="primary" @click="isEdit = true">编辑</Button>
            <Button v-if="isEdit" class="mr_20" @click="cancelClick">取消</Button>
            <Button v-if="isEdit" type="primary" @click="confirmClick">确认</Button>
        </template>
    </cus-drawer>
</template>
<script>
import { dynamicAll, editDynamicAll, } from "@/api/organ/dishesModule";
export default {
    data() {
        return {
            isEdit: false,
            dynamicAllData: [],
            dynamicAllDataCopy: [],
        };
    },
    methods: {
        onShow() {
            this.$refs["cusDrawerRef"].show();
            this.dynamicAllApi();
        },
        dynamicAllApi() {
            dynamicAll().then((res) => {
                if (res.code == 1) {
                    this.dynamicAllData = res.data.map((item) => {
                        if (item.valueItems) {
                            item.valueItems = JSON.parse(item.valueItems);
                        }
                        return {
                            ...item,
                        }
                    });
                    this.dynamicAllDataCopy = JSON.parse(JSON.stringify(this.dynamicAllData));
                }
            })
        },
        // 取消事件回调
        cancelClick() {
            this.isEdit = false;
            this.dynamicAllData = JSON.parse(JSON.stringify(this.dynamicAllDataCopy));
        },
        // 编辑事件回调
        confirmClick() {
            console.log('res', this.dishFoodData);
            let params = this.dynamicAllData.map((item) => {
                return {
                    id: item.id,
                    paramValue: item.paramValue,
                }
            });
            console.log(params);
            editDynamicAll(params).then((res) => {
                if (res.code == 1) {
                    this.isEdit = false;
                    this.dynamicAllDataCopy = JSON.parse(JSON.stringify(this.dynamicAllData));
                }
            });
        },
        onClose() {
            this.isEdit = false;
            this.dynamicAllData = [];
            this.dynamicAllDataCopy = [];
        },
    },
}
</script>
<style lang="scss" scoped>
.dynamicBox {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .dynamicText {
    width: 300px;
    flex-wrap: wrap;
  }
}
</style>